{% extends "user/common.html" %}

{% block title %}用户查询页面{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="css/user/query.css") }}">
{% endblock %}

{% block body %}
    <div>
        <div class="box1">
            <div class="box11">
                <label>
                    <input type="text" class="input" placeholder="请输入关键字" required>
                </label>
                <button class="search-btn" name="search">
                    <label class="lable1" onclick="window.location.href='{{ url_for('blueprint.search', keyword="高等") }}'">搜索</label>
                </button>
            </div>
        </div>
{#        <div class="box2">#}
{#            <label class="lable2">#}
{#                筛选#}
{#            </label>#}
{#            <div class="box21">#}
{#                <label class="lable2">大类</label>#}
{#                <button class="category-btn" name="categorybtn"> 教育考试</button>#}
{#                <button class="category-btn" name="categorybtn"> 科技IT</button>#}
{#                <button class="category-btn" name="categorybtn"> 文学小说</button>#}
{#                <button class="category-btn" name="categorybtn"> 人文社科</button>#}
{#            </div>#}
{#            <div class="box22">#}
{#                <lable class="lable2">小类</lable>#}
{#                <div>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                    <button class="product-btn" name="productbtn"> 未填</button>#}
{#                </div>#}
{#            </div>#}
{#            <div class="box23">#}
{#                <lable class="lable2">借阅</lable>#}
{#                <button class="borrow-num" name="borrownum"><20</button>#}
{#                <button class="borrow-num" name="borrownum">20~50</button>#}
{#                <button class="borrow-num" name="borrownum">50~100</button>#}
{#                <button class="borrow-num" name="borrownum">>100</button>#}
{#            </div>#}
{#            <div class="box24">#}
{#                <label class="lable2">是否现存</label>#}
{#                <div class="radioStyle">#}
{#                    <input type="radio" name="isexist" id="yes" checked>#}
{#                    <label for="yes">是</label>#}
{#                </div>#}
{#                <div class="radioStyle">#}
{#                    <input type="radio" name="isexist" id="no">#}
{#                    <label for="no">否</label>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
    </div>
    <div class="box3">
        <div class="box4">
            <table class="table" border="1px">
                <tr>
                    <th width="50px">序号</th>
                    <th width="100px">封面</th>
                    <th width="150px">书名</th>
                    <th width="100px">作者</th>
                    <th width="200px">简介</th>
                    <th width="70px">库存</th>
                    <th width="80px">操作</th>
                </tr>
                {% for book in data.book_list %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>
                            <div class="box31">
                                <img class="book-photo"
                                     src={{ book.image_url }}
                                     alt="img">
                            </div>
                        </td>
                        <td>{{ book.book_name }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.text }}</td>
                        <td>{{ book.current_number }}/{{ book.number }}</td>
                        <td>
                            <div class="box32">
                                <button class="collect-btn" onclick="window.location.href='{{ url_for('blueprint.collect', id=book.book_id) }}'">收藏</button>
                                <button class="borrow-btn" onclick="window.location.href='{{ url_for('blueprint.borrow', id=book.book_id) }}'">借阅</button>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        var categorybtn = document.getElementsByName('categorybtn');
        for (var i = 0; i < categorybtn.length; i++) {
            categorybtn[i].onclick = function () {
                for (var i = 0; i < categorybtn.length; i++) {
                    categorybtn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#4095E1';
            }
        }
        var productbtn = document.getElementsByName('productbtn');
        for (var i = 0; i < productbtn.length; i++) {
            productbtn[i].onclick = function () {
                for (var i = 0; i < productbtn.length; i++) {
                    productbtn[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#4095E1'
            }
        }
        var borrownum = document.getElementsByName('borrownum');
        for (var i = 0; i < borrownum.length; i++) {
            borrownum[i].onclick = function () {
                for (var i = 0; i < borrownum.length; i++) {
                    borrownum[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = '#4095E1'
            }
        }

    </script>
{% endblock %}